<script >
import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import '~/assets/css/base.css'
import '~/assets/css/activity_tab.css'
import '~/assets/css/bottom_rec.css'
import '~/assets/css/nice_select.css'
import '~/assets/css/order.css'
import '~/assets/css/swiper-3.3.1.min.css'
import "~/assets/css/pages-weixinpay.css"

import cookie from 'js-cookie'
import loginApi from '@/api/login'

export default {
  data() {
    return {
      token:'',
      loginInfo: {
        id: '',
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: ''
      }
    }
  },
  created() {

    this.showInfo()
  },
  methods:{
    person(){
      this.$router.push("/ucenter")
    },
    getTwo(){
      this.$router.push("/upword")
    },
    order(){
      this.$router.push("/order")
    },
    review(){
      this.$router.push("/review")
    },
    //微信登录显示的方法
    wxLogin() {
      //console.log('************'+this.token)
      //把token值放到cookie里面
      cookie.set('front_token',this.token)
      cookie.set('front_member','')
      //console.log('====='+cookie.get('front_token'))
      //调用接口，根据token值获取用户信息
      // loginApi.getLoginUserInfo()
      //   .then(response => {
      //     // console.log('################'+response.data.data.userInfo)
      //      this.loginInfo = response.data.data.userInfo
      //      cookie.set('front_member',this.loginInfo)
      //   })
    },
    //创建方法，从cookie获取用户信息
    showInfo() {
      //从cookie获取用户信息

      var userStr = cookie.get('front_member')
      console.log("-=-=-=-=-=")

      console.log(userStr)
      // 把字符串转换json对象(js对象)
      if(userStr) {
        this.loginInfo = JSON.parse(userStr)

        console.log( this.loginInfo )
        console.log( "00000000000")
      }
    },

    //退出
    logout() {
      //清空cookie值
      cookie.remove('front_token')
      cookie.remove('front_member')
      //回到首页面
      window.location.href = "/";
    }

  }
};
</script>

<template>
<div>
  <header id="header">
    <section class="container">
      <h1 id="logo">
        <a href="/" title="杰凡it">
          <img src="~/assets/img/logo.png" width="100%" alt="杰凡it">
        </a>
      </h1>
      <div class="h-r-nsl">
        <ul class="nav">
          <router-link to="/" tag="li" active-class="current" exact>
            <a>首页</a>
          </router-link>
          <router-link to="/course" tag="li" active-class="current">
            <a>课程</a>
          </router-link>
          <router-link to="/teacher" tag="li" active-class="current">
            <a>名师</a>
          </router-link>
          <router-link to="/article" tag="li" active-class="current">
            <a>文章</a>
          </router-link>
          <router-link to="/qa" tag="li" active-class="current">
            <a>问答</a>
          </router-link>
        </ul>
        <!-- / nav -->
        <!-- / nav -->
        <ul class="h-r-login">
          <li v-if="!loginInfo.id" id="no-login">
            <a href="/login" title="登录">
              <em class="icon18 login-icon">&nbsp;</em>
              <span class="vam ml5">登录</span>
            </a>
            |
            <a href="/register" title="注册">
              <span class="vam ml5">注册</span>
            </a>
          </li>
          <li v-if="loginInfo.id" id="is-login-one" class="mr10">
            <a id="headerMsgCountId" href="#" title="消息">
              <em class="icon18 news-icon">&nbsp;</em>
            </a>
            <q class="red-point" style="display: none">&nbsp;</q>
          </li>
          <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
            <a href="/ucenter" title>
              <img
                :src="loginInfo.avatar"
                width="30"
                height="30"
                class="vam picImg"
                alt
              >
              <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
            </a>
            <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
          </li>
          <!-- /未登录显示第1 li；登录后显示第2，3 li -->
        </ul>
        <aside class="h-r-search">
          <form action="#" method="post">
            <label class="h-r-s-box">
              <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
              <button type="submit" class="s-btn">
                <em class="icon18">&nbsp;</em>
              </button>
            </label>
          </form>
        </aside>
      </div>
      <aside class="mw-nav-btn">
        <div class="mw-nav-icon"></div>
      </aside>
      <div class="clear"></div>
    </section>
  </header>
  <el-row class="tac">

  <el-col :span="4">

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>个人中心</span>
        </template>

      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu" ></i>
        <span slot="title" @click="person()">我的资料</span>
      </el-menu-item>
      <el-menu-item index="3" >
        <i class="el-icon-document"></i>
        <span slot="title"  @click="getTwo()">修改密码</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title" @click="order()">我的订单</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title" @click="review()">我的评论</span>
      </el-menu-item>
    </el-menu>

  </el-col>
    <el-col :span="20">
    <nuxt/>
    </el-col>
  </el-row>
</div>
</template>

<style scoped>

</style>
